<template>
    <div class="qilin-headerNav">
        <div class="qilin-headerNav-menu">
            <div class="qilin-headerNav-menu-logo">
                <!-- <img src="@/assets/images/home-logo.png" alt="" /> -->
            </div>
            <ul class="qilin-headerNav-menu-list">
                <li :class="[ 
                        'qilin-headerNav-menu-list-item', 
                        item.path === route.path ? 'is-active' : '', 
                        item.isHide ? 'is-hide' : ''
                    ]" 
                    v-for="item in menuList" :key="item.label" @click="switchMenu(item)"
                >
                    {{ item.label }}
                </li>
            </ul>
        </div>
        <div class="qilin-headerNav-user">
            <div class="qilin-headerNav-user-info">
                <!-- <img src="@/assets/images/home-user1.png" alt="" /> -->
                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{ userName }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="quit()">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
  
  <script setup>
import Qilin from "qilin-utils";
import { getUserRoles } from "@/store/index.js";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

/*
    响应式选项区域
*/

/*
    数据变量定义区域
*/
const userName = computed(() => getUserRoles().userInfo.nickName || "管理员"); //当前登录人姓名

// 一级菜单数据配置
const menuList = reactive([
    {
        label: "首页",
        path: "/homepage"
    }
]);

/*
    计算属性等代码区域
*/

/*
    逻辑脚本代码区域
*/
// 点击菜单跳转事件监听
const switchMenu = (obj) => {
    obj.path && router.push(obj.path);
};
// 点击退出登录按钮事件监听
const quit = () => {

};

/*
    生命周期等代码区域
*/


</script>
  
  <style lang="scss" scoped>
.qilin-headerNav {
    width: 100%;
    height: 0.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
    background: linear-gradient(145deg, #0a2c5c 0%, #063f8d 91%);
    z-index: 99;
    > .qilin-headerNav-menu {
        flex: 6;
        display: flex;
        align-items: center;
        > .qilin-headerNav-menu-logo {
            width: 1.65rem;
            height: 0.32rem;
            > img {
                width: 100%;
            }
        }
        > .qilin-headerNav-menu-list {
            flex: 1;
            margin-left: 0.6rem;
            display: flex;
            align-items: center;
            > .qilin-headerNav-menu-list-item {
                color: #fff;
                font-size: $medium-text-size;
                position: relative;
                cursor: pointer;
                &:not(:last-child) {
                    margin-right: 0.35rem;
                }
                &.is-active {
                    // color:#046CE7;
                    background-clip: text;
                    -webkit-background-clip: text; /* Safari/Chrome */
                    -webkit-text-fill-color: transparent;
                    background-image: linear-gradient(
                        180deg,
                        #9bc6ed 0%,
                        #0285ff 100%
                    );
                    font-weight: bolder;
                    &::after {
                        position: absolute;
                        content: "";
                        width: 100%;
                        height: 0.03rem;
                        -webkit-text-fill-color: transparent;
                        background-image: linear-gradient(
                            180deg,
                            #9bc6ed 0%,
                            #0285ff 100%
                        );
                        bottom: -50%;
                        left: 0;
                    }
                }
            }
        }
    }
    > .qilin-headerNav-user {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        > .qilin-headerNav-user-info {
            display: flex;
            align-items: center;
            cursor: pointer;
            > img {
                width: 0.2rem;
                height: 0.2rem;
            }
            .el-dropdown-link {
                color: #fff;
                margin-left: 0.06rem;
                border: 0;
                outline: 0;
            }
        }
    }
}
</style>
  